import React from 'react';

import style from './style.styl';
import {Button,success} from '../../../../ui-components';
import util from '../../../../util';
import cx from 'classnames';

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as reviewAction from '../../../../actions/review.action' 

import InvitedItem from './InvitedItem';
import SelfProjectItem from './SelfProjectItem';
import {buildText} from '../tool/util';

@connect(null, dispatch => ({actions: bindActionCreators({...reviewAction}, dispatch)}))
class SelfCheck extends React.Component {
  static contextTypes = {
    router: React.PropTypes.object
  }
  constructor(props) {
    super(props);
    this.displayName = 'SelfCheck';
  }
  goPrevious = () => {
    this.props.tabRouter && this.props.tabRouter(3);
  }
  goNext = () => {
    const {
      isSubmittable,
      itemId,
      templateId
    } = this.props;
    if(isSubmittable){
      this.props.actions.submitSelfReview(itemId, 'activities', () => {
        this.context.router.push(`/review/index/${templateId}`);
        success('填写成功!')
      });
    }else {
      this.context.router.push(`/review/index/${templateId}`);
      success('更新成功!')
    }

  }
  render() {
    const {
      projects,
      question,
      invitedUsers,
      activityId,
      detail,
    } = this.props;
    if(!activityId) return null;
    return (
      <div>
        <div className={style['detail-area']}>
          <div className={style['detail-title']}>按项目自评</div>
          <div className={style['detail-box']}>
            { projects.length ?
              projects.map((v, i) => {
                return (
                  <div className={style['detial-project']}>
                    <SelfProjectItem key={i} id={activityId} index={i} viewMode={'activities'} actions={this.props.actions}  item={v} disabled />
                  </div>
                );
              })
              : 
              <div>未添加项目自评</div>
            }
          </div>
        </div>
        <div className={style['detail-area']}>
          <div className={style['detail-title']}>通用问题</div>
          <div className={style['detail-box']}>
            {
              question.map((v,i) => {
                return (
                  <div className={style['detail-question']}>
                    <div className={style['question-box']}>
                      <div className={style['question-title']}>{v.name}</div>
                      <div className={style['question-text']}>
                        {buildText(v.revieweeComment.content)}
                      </div>
                    </div>
                  </div>
                );
              })
            }
          </div>
        </div>
        <div className={style['detail-area']} style={{paddingBottom: '0'}}>
          <div className={style['detail-title']} style={{marginBottom: '0'}}>被邀请同事</div>
          <div className={style['detail-box']}>
            <InvitedItem item={invitedUsers.managerUser} isManager />
            {
              invitedUsers.invitedUsers.map((v, i) => {
                return <InvitedItem item={v} key={i} onRemove={this.onRemove} disabled/>
              })
            }
          </div>
        </div>
        {
          detail ?  null : 
          <div className={style['btn-bar']}>
            <Button label={'上一步'} className={style['l-btn']} onClick={this.goPrevious} />
            <Button label={'提交自评'} className={style['r-btn']} onClick={this.goNext} />
          </div>
        }
      </div>
    );
  }
}

export default SelfCheck;
